<template>
	<view class="container">
		<view class="head">
			<image class="photo"
				:src="serviceInfo.images==null || serviceInfo.images.length==0?'/static/persion/fan.png':serviceInfo.images[0]">
			</image>
			<view class="overlay lefttop" style="">
				<up-icon v-if="!isLike" name="star" color="#00C34F" size="50rpx" @click="onLike"></up-icon>
				<up-icon v-else name="star-fill" color="#00C34F" size="50rpx" @click="onLike"></up-icon>
			</view>
			<view class="overlay userinfo" style="">
				<view class="" style="width: 100%;text-align: center;">
					<img :src="serviceInfo.avatar==''?'/static/persion/success.png':serviceInfo.avatar"
						style="height: 120rpx;width: 120rpx;border-radius: 50%;" />
				</view>
				<view class="userName">
					{{ serviceInfo.userName}} LV1
					<up-icon name="man" v-if="serviceInfo.gender ==1" color="#2979ff" size="20"></up-icon>
					<up-icon name="woman" v-else color="#ff0f7b" size="20"></up-icon>
					{{serviceInfo.age}}
				</view>
				<view class="" style="display: flex;justify-content: center;align-items: center;">
					<up-icon name="map" color="#2979ff" size="20"></up-icon>

					地址:{{serviceInfo.address}}
				</view>

			</view>
			<view class="overlay pages" style="" @click="onpreview">
				{{serviceInfo.images==null?0:serviceInfo.images.length}}张
			</view>
		</view>
		<view class="flex hcenter renzheng">
			<view class="flex hcenter">
				<img src="/static/persion/phone.png" alt="" />
				手机
			</view>
			<view class="flex hcenter">
				<img src="/static/persion/idcard.png" alt="" />身份证
			</view>
			<view class="flex hcenter">
				<img src="/static/persion/cyz.png" alt="" />从业证
			</view>
			<view class="flex hcenter">
				<img src="/static/persion/byz.png" alt="" />毕业证
			</view>
		</view>
		<view class="flex more">
			随时退 | 过期退 | {{serviceInfo.work}} 年经验 成交{{serviceInfo.countOrderTimes}} {{serviceInfo.marginStatus==1?("保证金:¥"+serviceInfo.margin):""}}
		</view>
		<view class="flex video">
			<view>视频</view>
			<video v-for="video in serviceInfo.videos" :src="video"
				style="margin: 0 20rpx; height: 80rpx; width: 110rpx;"></video>
		</view>
		<view class="youshi">
			<view class="">优势</view>
			<view class="" style="margin-top: 20rpx;font-size: 24rpx;color: #a8a8a8;">{{serviceInfo.advantage}}</view>
		</view>
		<view class="jiaoyugongzuo">
			<view class="flex jiaoyu" v-for="exp in serviceInfo.eduExperiences">
				<view class="title">教育</view>
				<view class="addr">{{exp.name}}</view>
				<view class="time">{{exp.dateStart==null?"":exp.dateStart.substring(0,7)}}--{{exp.dateStart==null?"":exp.dateStart.substring(0,7)}}</view>
				<view class="type">{{exp.work}}</view>
			</view>
			<view class="flex gongzuo" v-for="exp in serviceInfo.workExperiences">
				<view class="title">工作</view>
				<view class="addr">{{exp.name}}</view>
				<view class="time">{{exp.dateStart==null?"":exp.dateStart.substring(0,7)}}--{{exp.dateStart==null?"":exp.dateStart.substring(0,7)}}</view>
				<view class="type">{{exp.work}}</view>
			</view>
		</view>
	</view>
	<view class="yuyue">
		<view class="flex hcenter" style="margin-left: 8rpx;">预约<view style="font-size: 10rpx;color: #666;">
				({{serviceInfo.serviceList.length}})</view>
		</view>
		<view class="flex hcenter yylb" v-for="(item,index) in serviceInfo.serviceList" :key="index"
			@click="onYuyue(item)">
			<view class="">
				<up-image width="120rpx" height="120rpx" :src="item.icon" :lazy-load="true"
					mode="aspectFill"></up-image>
			</view>
			<view class="info">
				<view class="">{{item.serviceName}}</view>
				<view class="flex hcenter" style="width: 100%;justify-content:space-between;">
					<view class="">
						<view class="flex" style="align-items: flex-end">
							<up-tag :text="(item.discount*10).toFixed(1)+'折' " type="warning" size="mini"></up-tag>
							<view class="oldmoney">￥{{(item.servicePrice).toFixed(2)}}
							</view>
							<view class="kaishi">/
								{{filterType(item.priceType)}}
							</view>
						</view>
						<view class="money">￥{{(item.servicePrice*item.discount).toFixed(2)}}
							/
							{{filterType(item.priceType)}}

						</view>
						<view class="kecheng">{{item.serviceTime}}</view>
					</view>
					<view class="yybtn">预约</view>
				</view>
			</view>
		</view>
	</view>
	<view class="pingjia">
		<view class="pj1">评价<span style="font-size: 10rpx;color: #666;">({{pinlunlist.length}})</span></view>
		<view class="flex wcenter hcenter pj2">
			<view class="pj_fen">5.0</view>
			<view class="pj_xin">
				<view class="">综合评价</view>
				<view class="">
					<img src="/static/persion/x1.png" class="xinxin" />
					<img src="/static/persion/x1.png" class="xinxin" />
					<img src="/static/persion/x1.png" class="xinxin" />
					<img src="/static/persion/x1.png" class="xinxin" />
					<img src="/static/persion/x0.png" class="xinxin" />
				</view>
			</view>
			<view class="pj_lv">
				<view class="">高于99%的同行</view>
				<view class="">好评率95%</view>
			</view>
		</view>
		<view class="flex wcenter pj3">
			<view class="pjtp">服务热情 20</view>
			<view class="pjtp">价格 30</view>
			<view class="pjtp">非常专业 50</view>
			<view class="pjtp">其他 60</view>
			<view class="pjtp">性价比高30</view>
			<view class="pjtp">准时 40</view>

		</view>
	</view>
	<view class="pinglun" v-for="(item ,index) in pinlunlist" :key="index">
		<view class="flex hcenter user">
			<img src="/static/persion/fan.png" class="user-head" />
			<view class="user-2">
				<view>
					昵称<span class="level">L1</span>
				</view>
				<view class="flex hcenter ">
					<view class="">
						<img src="/static/persion/x1.png" class="dgpx" />
						<img src="/static/persion/x1.png" class="dgpx" />
						<img src="/static/persion/x1.png" class="dgpx" />
						<img src="/static/persion/x1.png" class="dgpx" />
						<img src="/static/persion/x0.png" class="dgpx" />
					</view>
					<view class="riqi">2024-1-1</view>
				</view>
			</view>
		</view>
		<view class="pltxt">
			性价比高性价比高性价比高性价比高性价比高性价比高性价比高性价比高性价比高性价比高性价比高性价比高
		</view>
		<view class="flex plphoto">
			<img src="/static/persion/fan.png" class="iphoto" />
			<img src="/static/persion/fan.png" class="iphoto" />
			<img src="/static/persion/fan.png" class="iphoto" />
			<img src="/static/persion/fan.png" class="iphoto" />
			<img src="/static/persion/fan.png" class="iphoto" />
		</view>
	</view>
	<view class="footer" style="border-top:1rpx solid #a8a8a8 ;">
		<view class="flex hcenter wcenter button consult">
			<img src="/static/persion/zhixun.png" style="height: 38rpx;width: 38rpx;" alt="" />
			<view style="margin: 0 0 10rpx 20rpx;" open-type="contact">咨询</view>
		</view>
		<view style="display: none;" class="flex hcenter wcenter button appointment" @click="onYuyue()"> <img
				src="/static/persion/yuyue.png" style="height: 37rpx;width: 42rpx;" alt="" />
			<view style="margin: 0 0 10rpx 20rpx;">预约</view>
		</view>
	</view>
	<view class="viewbottom"></view>
</template>


<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"


	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		serviceUidApi,
		serverDetailApi,
		serviceEvaluateApi
	} from '@/api/service.js'
	import {
		getLikeApi,likeApi
	} from '@/api/user'
	
	import filterType from '@/utils/priceType.js'
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				yuyuelist: [{}, {}, {}],
				serviceInfo: {
					images: [],
					serviceList: [],
					eduExperiences:[],
					workExperiences:[],
				},
				pinlunlist: [{}, {}],
				id: '',
				uid: '',
				title: '',
				isLike:"",
			})
			onLoad((option) => {
				uni.setNavigationBarTitle({
					title: '详情',
				})
				console.log(option);

				state.id = option.id;
				state.uid = option.uid
				// state.title = option.name;
				// uni.setNavigationBarTitle({
				// 	title: state.title,
				// })
				getServiceInfo()
				serviceEvaluate()
				getLike()
			})


			const getServiceInfo = async () => {
				const {
					data
				} = await serverDetailApi(state.uid)
				try {
					data.images = JSON.parse(data.images);
				} catch {
					data.images = [];
				}
				try {
					data.videos = JSON.parse(data.videos);
					data.videos = ['https://yibaovod.jixuantiant.com/a4647e71320b97da408ad237163aca38.mp4',
						'https://yibaovod.jixuantiant.com/76274748ff46a9708510048290acfa65.mp4'
					];
				} catch {
					data.videos = [];
				}
				if (data.avatar == null) data.avatar = '';
				data.age = toage(data.birthday);
				data.work = toage(data.workAt);

				state.serviceInfo = data
			}
			const serviceEvaluate = async () => {
				const {
					data
				} = await serviceEvaluateApi({
					serverId: state.uid
				});
				state.pinlunlist = data.records
			}
			const onYuyue = (item) => {
				uni.navigateTo({
					url: `/subpages/order/pay?id=${ item ? item.id : state.id}`
				})
			}
			const toage = (birthday) => {
				if (birthday == null || birthday == '') return '--';
				try {
					var birthDate = new Date(birthday);
					var today = new Date();
					var age = today.getFullYear() - birthDate.getFullYear();

					// 检查是否已过今年的生日  
					var m = today.getMonth() - birthDate.getMonth();
					if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
						age--;
					}
					return age;
				} catch {
					return '--'
				}
			}
			const onpreview = () => {
				if (state.serviceInfo.images == null) return;
				if (state.serviceInfo.images.length == 0) return;
				uni.previewImage({
					current: 0, // 当前显示图片的http链接索引  
					urls: state.serviceInfo.images // 需要预览的图片http链接列表  
				});
			}
			const getLike = async () => {
				const {
					data
				} = await getLikeApi(state.uid)
				state.isLike = data
			}
			const onLike = async () => {
				await likeApi(state.uid)
				if (state.isLike) {
					uni.$u.toast("已取消关注！");
				} else {
					uni.$u.toast("关注成功！");
				}

				getLike()


			}
			return {
				...toRefs(state),
				onYuyue,
				onLike,
				filterType,
				serviceEvaluate,
				getServiceInfo,
				onpreview,
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	.container {
		min-height: 100%;
		background: rgb(244, 244, 244);
	}

	.head {
		position: relative;
	}

	.photo {
		width: 100%;
		height: 368rpx;
	}

	.overlay {
		position: absolute;
		// color: white; /* 根据需要调整文字颜色 */  
	}

	.userinfo {
		top: 72rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.userName {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		align-items: center;
	}

	.lefttop {
		top: 20rpx;
		right: 10rpx;
		background-color: #161b1f;
		border-radius: 50%;
		height: 50rpx;
		width: 50rpx;
		text-align: center;
	}

	.pages {
		top: 296rpx;
		left: 10rpx;
		background-color: #161b1f;
		color: #fff;
		height: 52rpx;
		line-height: 52rpx;
		width: 100rpx;
		font-size: 28rpx;
		border-radius: 26rpx;
		text-align: center;
	}

	.renzheng {
		background-color: #fff;
		height: 90rpx;
		padding-left: 26rpx;
		font-size: 24rpx;

		// border-bottom: 1rpx solid #000;
		view {
			margin-right: 30rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}

		img {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.more {
		margin-top: 2rpx;
		height: 70rpx;
		background-color: #fff;
		color: #7e7e7e;
		font-size: 22rpx;
		padding-left: 26rpx;
		align-items: center;
	}

	.video {
		margin-top: 18rpx;
		height: 108rpx;
		background-color: #fff;
		padding-left: 26rpx;
		align-items: center;
	}

	.youshi {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 36rpx 0 50rpx 0;
		padding-left: 26rpx;
	}

	.jiaoyugongzuo {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 20rpx 0 24rpx 0;
		padding-left: 26rpx;
		color: #a8a8a8;
		font-size: 24rpx;

		.jiaoyu {}

		.gongzuo {
			margin-top: 26rpx;
		}

		.title {
			color: #747474;
			font-size: 32rpx;
		}

		.addr {
			width: 250rpx;
			text-align: center;
			margin: 0 3rpx;
		}

		.time {
			width: 240rpx;
			text-align: center;
		}

		.type {}
	}

	.yuyue {
		margin-top: 18rpx;
		padding: 20rpx 0 1rpx 0;
		background-color: #fff;
		padding-left: 17rpx;

		.yylb {
			margin: 20rpx 0;

			.info {
				margin-left: 12rpx;
				font-size: 30rpx;
				width: 100%;
				margin-bottom: 16rpx;

				.kctype {
					margin: 0 20rpx;
					color: #1a68bb;
				}

				.kcks {
					color: #ff6700;
				}

				.money {
					color: #ff6700;
					font-weight: 600;
				}

				.zhekou {
					font-size: 20rpx;
					color: #ff6700;
					border: 1rpx solid #35c901;
					text-align: center;
					border-radius: 5rpx;
					margin: 0 10rpx;
					padding: 0 5rpx;
				}

				.oldmoney {
					font-size: 24rpx;
					color: #969696;
					text-decoration: line-through;
				}

				.kaishi {
					margin: 0 0 0 20rpx;
					color: #238d0f;
					font-size: 24rpx;
				}

				.kecheng {
					color: #969696;
					font-size: 24rpx;
				}
			}

			.yybtn {
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				width: 105rpx;
				background-color: #fe7525;
				border-radius: 60rpx;
				color: #fff;
				margin-right: 30rpx;
			}
		}
	}

	.pingjia {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 0 20rpx 17rpx;

		.pj2 {
			margin-top: 50rpx;

			.pj_fen {
				font-size: 50rpx;
				color: #fac100;
				margin-right: 20rpx;
			}

			.pj_xin {
				color: #fac100;
				margin-right: 20rpx;
				font-size: 28rpx;

				.xinxin {
					width: 29rpx;
					height: 29rpx;
					margin-right: 5rpx;
				}

			}

			.pj_lv {
				font-size: 28rpx;
				color: #6c6c6c;
			}
		}

		.pj3 {
			flex-wrap: wrap;
			margin-top: 30rpx;

			.pjtp {
				color: #a4a4a4;
				height: 52rpx;
				line-height: 52rpx;
				padding: 0 25rpx;
				margin: 10rpx;
				border-radius: 26rpx;
				border: 1rpx solid #a4a4a4;
				font-size: 30rpx;
			}
		}
	}

	.pinglun {
		margin-top: 2rpx;
		background-color: #fff;
		padding: 20rpx;

		.user {
			.user-head {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
			}

			.user-2 {
				margin-left: 15rpx;
				font-size: 28rpx;

				.level {
					margin-left: 10rpx;
					background-color: #f9c301;
					color: #fff;
					font-size: 24rpx;
					border-radius: 5rpx;
					padding: 2rpx 10rpx;
				}

				.dgpx {
					width: 28rpx;
					height: 28rpx;
					margin: 10rpx 5rpx 0 0;
				}

				.riqi {
					font-size: 28rpx;
					color: #a6a6a6;
				}
			}
		}

		.pltxt {
			color: #717171;
			font-size: 30rpx;
		}

		.plphoto {
			flex-wrap: wrap;
			justify-content: space-between;

			.iphoto {
				height: 110rpx;
				width: 145rpx;
				margin: 10rpx 0rpx;
			}
		}
	}

	.footer {
		position: fixed;
		/* 固定定位 */
		bottom: 0;
		/* 底部对齐 */
		width: 100%;
		/* 宽度100% */
		display: flex;
		/* 使用Flex布局 */
	}

	.button {
		flex: 1;
		/* 各占50%的宽度 */
		text-align: center;
		/* 文本居中 */
		padding: 10px 0;
		/* 上下内边距 */
	}

	.consult {
		background-color: #ffffff;
		/* 咨询按钮的背景色 */
	}

	.appointment {
		background-color: green;
		/* 预约按钮的背景色 */
		color: #fff;
	}
</style>